<template>
    <div class="register web-inner">
        <div class="title">
            <div class="title-left">
                加入會員
            </div>
        </div>
        <div class="form-main">
            <el-form  :inline="false" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                <el-form-item label="帳號" prop="account">
                    <el-input v-model="ruleForm.account"></el-input>
                    <span class="other">6個英文字母或數字組合</span>
                </el-form-item>
                <el-form-item label="密碼" prop="pwd">
                    <el-input type="password" v-model="ruleForm.pwd"></el-input>
                    <span class="other">8個英文字母或數字組合</span>
                </el-form-item>
                <el-form-item label="確認密碼" prop="rePwd">
                    <el-input type="password" v-model="ruleForm.rePwd"></el-input>
                    <span class="other">兩次密碼輸入必須相同</span>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                    <span class="other">文字輸入</span>
                </el-form-item>
                <el-form-item label="電話" prop="tel">
                    <el-input v-model="ruleForm.tel" type="tel"></el-input>
                    <span class="other">數字輸入（區號，數字）</span>
                </el-form-item>
                <el-form-item label="手機號碼" prop="m_phone">
                    <el-input v-model="ruleForm.m_phone" type="number"></el-input>
                    <span class="other">數字輸入（10碼，09檢查）</span>
                </el-form-item>
                <el-form-item label="LINE ID" prop="line_id">
                    <el-input v-model="ruleForm.line_id"></el-input>
                    <span class="other">文字輸入</span>
                </el-form-item>
                <el-form-item label="微信 ID" prop="">
                    <el-input v-model="ruleForm.weichat_id"></el-input>
                    <span class="other">文字輸入</span>
                </el-form-item>
                <el-form-item label="E-mail" prop="email">
                    <el-input v-model="ruleForm.email"></el-input>
                    <span class="other">E-mail信箱，XXX@XXXX.XXXX.XXX</span>
                </el-form-item>
                <el-form-item label="開店類型" prop="brand_category">
                    <el-checkbox-group v-model="ruleForm.brand_category">
                        <el-checkbox v-for="(item,index) in type" :label="item.title" name="type" :key="index">{{item.title}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="預計地點" prop="location">
                    <el-radio-group v-model="loca" @change="changeType">
                        <el-radio label="0">尚未決定</el-radio>
                        <el-radio label="1">台灣地區</el-radio>
                        <el-radio label="2">海外地區</el-radio>
                    </el-radio-group>
                    <el-select style="display: block" v-if="loca==='1'" v-model="ruleForm.location">
                        <el-option :label="item.name" :value="item.name" v-for="(item,index) in area" :key="index"></el-option>
                    </el-select>
                    <el-input  v-if="loca==='2'"v-model="ruleForm.location"></el-input>
                </el-form-item>
                <el-form-item label="總預算" prop="budget">
                    <el-select v-model="ruleForm.budget" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.label"
                                :label="item.label"
                                :value="item.label">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="計劃開店時間" prop="expected_time">
                    <el-radio-group v-model="ruleForm.expected_time">
                        <el-radio label="一個月"></el-radio>
                        <el-radio label="三個月"></el-radio>
                        <el-radio label="半年"></el-radio>
                        <el-radio label="一年"></el-radio>
                        <el-radio label="尚未確定"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="方便聯絡時間" prop="contact_time">
                    <el-radio-group v-model="ruleForm.contact_time">
                        <el-radio label="早上9:00~12:00"></el-radio>
                        <el-radio label="下午12:00~18:00"></el-radio>
                        <el-radio label="晚上18:00~22:00"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="備註說明" prop="">
                    <el-input type="textarea" v-model="ruleForm.desc" placeholder="填寫詳細需求說明，會更得到加盟總部的青睞哦！"></el-input>
                </el-form-item>
                <el-form-item label="驗證碼" prop="phrase">
                    <img  style="height: 40px;vertical-align: middle;cursor: pointer" :src="imgUrl1" alt="">

                    <el-input style="display: inline-block;width: 200px;margin: 10px;" v-model="ruleForm.phrase"/>
                    <a @click="refresh" href="javascript:;">看不清？點擊刷新</a>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">送出</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import qs from 'qs';
    export default {
        name: "register",
        data() {
            var checkAccount=(rule, value, callback) => {
                var temp = /^[a-zA-Z0-9]{6}$/;
                if(value===""){
                    callback(new Error('必填'));
                }
                if(temp.test(value)){
                    this.$http({
                        method:"post",
                        url:this.API.check_account_name,
                        data:qs.stringify({account:value}),
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        withCredentials:true
                    }).then((res) => {
                        if(res.status ===200 && res.data[0].result===0){
                        callback();
                    }else{
                        callback(new Error('該賬號已被使用！'));
                    }
                })
                }else{
                    callback(new Error('請輸入6個英文字母或數字組合'));
                }
            };
            var checkPwd=(rule, value, callback) => {
                var temp = /^[a-zA-Z0-9]{8}$/;
                if(value===""){
                    callback(new Error('必填'));
                }
                if(!temp.test(value)){
                    callback(new Error('請輸入8個英文字母或數字組合'));
                }
                if(this.ruleForm.rePwd!==""&& this.ruleForm.rePwd===value || this.ruleForm.rePwd===""){
                    callback();
                }else{
                    callback(new Error('請輸入8個英文字母或數字組合'));
                }
            };
            var checkRepwd=(rule, value, callback) => {
                var temp = /^[a-zA-Z0-9]{8}$/;
                if(value===""){
                    callback(new Error('必填'));
                }
                if(!temp.test(value)){
                    callback(new Error('請輸入8個英文字母或數字組合'));
                }
                if(this.ruleForm.pwd!==""&& this.ruleForm.pwd===value || this.ruleForm.pwd===""){
                    callback();
                }else{
                    callback(new Error('兩次輸入的密碼不一致'));
                }
            };
            var checkEmail=(rule, value, callback) => {
                var temp = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
                if(value===""){
                    callback(new Error('必填'));
                }
                if(!temp.test(value)){
                    callback(new Error('請輸入正確的郵箱'));
                }
                callback();
            };
            var checkPhone = (rule, value, callback) => {
                let mobilePatternTW = /^(\+886\s)?[0]{1}[9]{1}\d{8}$/;
                if(mobilePatternTW.test(value)){
                    callback();
                }else{
                    callback(new Error('請輸入正確的電話號碼'));
                }
            };
            var checkLoc = (rule, value, callback) => {
                if(this.loca==='') {
                    callback(new Error('必填'));
                }else if(this.loca==="0"){
                    callback();
                } else{
                    if(this.ruleForm.location===''){
                        callback(new Error('必填'));
                    }else{
                        callback();
                    }
                }

            };
            return {
                ruleForm: {
                    account: "",
                    pwd: "",
                    rePwd: "",
                    name: '',
                    tel: '',
                    m_phone: '',
                    line_id:'',
                    weichat_id:'',
                    email:'',
                    brand_category: [],
                    location:'',
                    budget:"",
                    expected_time:'',
                    contact_time:'',
                    desc:'',
                    phrase:'',
                },
                rules: {
                    account: [
                        { validator:checkAccount,required: true, trigger: 'blur' },
                    ],
                    pwd: [
                        { required: true,validator:checkPwd, trigger: 'blur' },
                    ],
                    rePwd: [
                        { required: true,validator:checkRepwd, trigger: 'blur' },
                    ],
                    brand_category: [
                        { required: true, message: '必填', trigger: 'change' },
                    ],
                    name: [
                        { required: true, message: '必填', trigger: 'blur' }
                    ],
                    tel: [
                        { required: true, message: '必填', trigger: 'blur' }
                    ],
                    m_phone: [
                        { required: true,message: '必填',validator:checkPhone, trigger: 'blur' }
                    ],
                    line_id: [
                        { required: true,message: '必填', trigger: 'blur' }
                    ],
                    weichat_id: [
                        { required: true,message: '必填', trigger: 'blur' }
                    ],
                    email: [
                        { required: true,validator:checkEmail, trigger: 'blur' }
                    ],
                    location: [
                        { required: true, validator:checkLoc,trigger: 'change' }
                    ],
                    Shop_property: [
                        { required: true,message: '必填', trigger: 'change' }
                    ],
                    budget: [
                        { required: true, message: '必填',trigger: 'change' }
                    ],
                    expected_time: [
                        { required: true, message: '必填',trigger: 'change' }
                    ],
                    contact_time: [
                        { required: true,message: '必填', trigger: 'change' }
                    ],
                    phrase: [
                        { required: true,message: '必填', trigger: 'blur' }
                    ],
                },
                type:[],
                options: [
                    {
                        label: '10萬以下'
                    },
                    {
                        label: '10萬~20萬'
                    }, {
                        label: '20萬~50萬'
                    }, {
                        label: '50萬~100萬'
                    }, {
                        label: '100萬以上'
                    }
                ],
                loca:"",
                imgUrl1:"/webroot/session.php",
            }
        },
        mounted() {
            this.getBrandCategory()
        },
        methods:{
            getBrandCategory() {
                this.$http.post(this.API.get_brand_category).then((res) => {
                    let $this = this;
                if(res.status ===200 && res.data.length>0){
                    this.type = res.data;
                }
            })
            },
            changeType() {
                if(this.loca ==='0'){
                    this.ruleForm.location = "尚未確定";
                }else{
                    this.ruleForm.location = "";
                }
            },
            refresh() {
                this.imgUrl1="/webroot/session.php?"+new Date().getTime()
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if(valid) {
                        this.sendData()
                    } else {
                        console.log('error submit!!');
            }
            })
            },
            sendData() {
                let data = Object.assign({},this.ruleForm);
                data.brand_category = data.brand_category.join(",");
                this.$http({
                    method:"post",
                    url:this.API.apply_user,
                    data:qs.stringify(data),
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    withCredentials:true
                }).then((res) => {
                    this.refresh()
                  if(res.data[0].code==="101"){
                    this.resetForm("ruleForm");
                    this.$alert(this.formTips, '成功', {
                      confirmButtonText: '确定',
                      callback: action => {
                        location.href="#/login"
                      }
                    });
                  }else{
                    this.$alert(res.data[1].desc, '提示', {
                      confirmButtonText: '确定',
                    });
                  }
            })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        }
    }
</script>

<style scoped lang="less">
    @import "../style/base";
    .register{
        margin: 30px auto;
        .other{
            padding-left: 20px;
            color: #979797;
        }
        .title{
            height: 48px;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            border-bottom: 4px solid #2e436d;
            margin-bottom: 15px;
            .title-left{
                padding:  0 18px;
                height: 48px;
                line-height: 48px;
                font-size: 24px;
                background-color:#2e436d;
                color: #ffffff;
            }
        }
    }

</style>
<style lang="less">
    .register{
        .el-input{
            width: 300px;
        }
    }
</style>